<template>
  <div class="tabBox">
    <!-- <transition name="fade"> -->
    <keep-alive :include="keepAliveArr">
      <Panel class="h-full">
        <component :is="CurrentComponent[store.currentTab]" class="componentBox"></component>
      </Panel>
    </keep-alive>
    <!-- </transition> -->

    <div class="tabCheckBox">
      <div
        v-for="item in tabList"
        :key="item.id"
        class="checkBox"
        :class="{ active: store.tabId == item.id }"
        @click="handleCheck(item)"
      >
        <span> {{ item.name }}</span>
        <span v-show="!item.name">{{ store.currentTabName }}</span>
      </div>
      <!-- <div class="checkBox" :class="{ active: store.tabId == 7 }" @click="handleClick">{{
          store.currentTabName
      }}</div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { useBusinessStore } from '@/store'
const store = useBusinessStore()
// var currentComp = computed(() => store.changeComponent)

/** 需要缓存的组件，有些不需要缓存，就不放在这个数组 */
const keepAliveArr = ref([
  'Company',
  'Portrait',
  'Power',
  'Command',
  'Weather',
  'Control',
  'Facility',
  'Files',
  // 'Model',
  // 'Review',
])
/***** start *****/
const CurrentComponent: any = reactive({
  Company: markRaw(defineAsyncComponent(() => import('./Company.vue'))),
  Portrait: markRaw(defineAsyncComponent(() => import('./Portrait.vue'))),
  Power: markRaw(defineAsyncComponent(() => import('./Power.vue'))),
  Command: markRaw(defineAsyncComponent(() => import('./Command.vue'))),
  Weather: markRaw(defineAsyncComponent(() => import('./Weather.vue'))),
  CurrenComp: markRaw(defineAsyncComponent(() => import('./CurrenComp.vue'))),
  Facility: markRaw(defineAsyncComponent(() => import('./Facility.vue'))),
  Files: markRaw(defineAsyncComponent(() => import('./Files.vue'))),
  // Model: markRaw(defineAsyncComponent(() => import('./Model.vue'))),
  // Review: markRaw(defineAsyncComponent(() => import('./Review.vue'))),
}) // 点击id
watch(
  () => store.tabId,
  (newValue, oldValue) => {
    store.tabId = newValue
  }
)
watch(
  () => store.currentTab,
  (newValue, oldValue) => {
    store.currentTab = newValue
  }
)
watch(
  () => store.currentTabName,
  (newValue, oldValue) => {
    store.currentTabName = newValue
  }
)
// const currentTab: any = ref('Company'); // 动态组件值
// 右侧tab选项卡list
const tabList = reactive([
  {
    id: 0,
    name: '单位',
    componentId: 'Company',
  },
  {
    id: 1,
    name: '画像',
    componentId: 'Portrait',
  },
  {
    id: 2,
    name: '力量',
    componentId: 'Power',
  },
  {
    id: 3,
    name: '指挥',
    componentId: 'Command',
  },
  {
    id: 4,
    name: '设施',
    componentId: 'Facility',
  },
  {
    id: 5,
    name: '气象',
    componentId: 'Weather',
  },
  {
    id: 6,
    name: '资料',
    componentId: 'Files',
  },
  {
    id: 7,
    componentId: 'CurrenComp',
  },
])
// tab选项卡点击事件
const handleCheck = (item: any) => {
  store.tabId = item.id
  store.currentTab = item.componentId
}
// 最后的地图联动动态菜单
const handleClick = () => {
  store.tabId = 7
  store.currentTab = 'CurrenComp'
}
/***** end *****/
</script>
<style lang="less" scoped>
.tabBox {
  position: absolute;
  top: 0;
  left: 510px;
  z-index: 9;
  padding: 0px;
  margin: 0px;
  width: 500px;
  height: 1030px;
  background-color: rgba(0, 0, 0, 0.4);
  margin-top: 28px;

  .componentBox {
    width: 100%;
    height: 100%;
  }

  .tabCheckBox {
    z-index: 10;
    // width: 120px;
    position: absolute;
    right: -40px;
    top: 50px;

    .checkBox {
      width: 40px;
      height: 130px;
      font-size: 18px;
      color: #fff;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-bottom: -20px;
      text-align: center;
      cursor: pointer;
      background: linear-gradient(90deg, rgba(10, 25, 50, 0.54), rgba(3, 40, 53, 0.29));
      clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 calc(100% - 20%));
      writing-mode: vertical-lr;
      letter-spacing: 10px;

      &:hover {
        background: rgba(0, 255, 255, 0.427);
        clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 calc(100% - 20%));
      }
    }

    .active {
      background: rgba(0, 255, 255, 0.427);
      clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 calc(100% - 20%));
    }
  }
}
</style>

<style>
.fade-enter-active {
  animation: fadeOut 0.5s ease;
}

.fade-leave-active {
  animation: fadeIn 0.5s ease reverse;
}
</style>
